<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Flexbox</title>
        <style>
            #container {
                display: flex;
                flex-wrap: wrap;
            }
            #container >div{
                background-color: green;
                font-size: 20px;
                margin: 20px;
                padding: 20px;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div>1.This is inside of a div to demo flexbox</div>
            <div>2.This is inside of a div to demo flexbox</div>
            <div>3.This is inside of a div to demo flexbox</div>
            <div>4.This is inside of a div to demo flexbox</div>
            <div>5.This is inside of a div to demo flexbox</div>
            <div>6.This is inside of a div to demo flexbox</div>
            <div>7.This is inside of a div to demo flexbox</div>
            <div>8.This is inside of a div to demo flexbox</div>
            <div>9.This is inside of a div to demo flexbox</div>
            <div>10.This is inside of a div to demo flexbox</div>
            <div>11.This is inside of a div to demo flexbox</div>
            <div>12.This is inside of a div to demo flexbox</div>
        </div>
    </body>
</html>